<!--
 * @Description: 省略提示框
 * @Author: hmt
 * @Date: 2024-03-14 09:15:12
 * @LastEditors: hmt
 * @LastEditTime: 2024-04-01 02:01:19
-->
<template>
  <el-tooltip placement="top"
              popper-class="big-tooltip"
              effect="light"
              :content="content"
              raw-content
              :disabled="!isShowTip"
              :hide-after="100">
    <div :class="cls"
         :style="{'-webkit-line-clamp': line}"
         @mouseenter="onMouseEnter($event)"
         v-html="content" />
  </el-tooltip>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'base-ellipsis-tip',
  props: {
    className: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      required: true
    },
    line: {
      type: Number,
      default: 1
    }
  },
  setup(props) {
    const cls = computed(() => `base-ellipsis-tip ${props.className}`)
    const isShowTip = ref(false)

    const onMouseEnter = (ev: MouseEvent) => {
      isShowTip.value = ev.target.clientHeight < ev.target.scrollHeight
    }

    return {
      cls,
      isShowTip,
      onMouseEnter
    }
  }
})
</script>

<style lang="scss" scoped>
.base-ellipsis-tip {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  word-break: break-word;
}
</style>
